<template>
  <el-dialog
    title="修改密码"
    width="50%"
    height="'230'"
    :close-on-click-modal="false"
    @close="clearForm"
    :destroy-on-close="true"
    :modelValue="showDialog"
  >
    <el-form
      label-position="right"
      :rules="resetPassWordRules"
      ref="formLabelAlignRef"
      label-width="120px"
      :model="formLabelAlign"
    >
      <el-form-item label="新密码：" prop="newpwd">
        <el-input
          type="password"
          v-model="formLabelAlign.newpwd"
          placeholder="请输入新密码"
          show-password
        ></el-input>
      </el-form-item>
      <el-form-item label="确认密码：" prop="confirmPwd">
        <el-input
          type="password"
          v-model="formLabelAlign.confirmPwd"
          placeholder="请再次输入密码"
          show-password
        ></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer center">
      <el-button type="primary" @click="onSubmit">确认</el-button>
      <el-button style="margin-left: 100px" @click="cancel_model"
        >取消</el-button
      >
    </div>
  </el-dialog>
</template>
<script setup>
import { reactive, ref, defineEmits } from "vue";
import { ElMessage } from "element-plus";
import { editPassWord } from "@/api/userAdmin";
import { isValidPwd } from "@/utils/validate";
const emits = defineEmits(["cancel"]);

const props = defineProps({
  showDialog: {
    type: Boolean,
    default: false,
  },
  id: {
    type: String,
    default: "",
  },
});
// const showDia = ref(false);
const formLabelAlign = reactive({
  newpwd: "", //  新密码
  confirmPwd: "", //确认密码
});
/** 密码校验 */
const validatePwd = (rule, value, callback) => {
  if (value === "") {
    callback(new Error("密码不能为空"));
  } else {
    // 校验密码
    if (!isValidPwd(value)) {
      rule.message =
        "8~64位字符，允许大、小写英文字母、特殊字符、数字，且至少3种组合";
      callback(new Error());
    } else {
      callback();
      // 注意，这个空的callback非常重要，没有它作为结束，整个校验会出问题
    }
  }
};
/** 重置密码表单校验规则 */
const resetPassWordRules = {
  newpwd: [
    {
      required: true,
      validator: validatePwd,
      message:
        "8~64位字符，允许大、小写英文字母、特殊字符、数字，且至少3种组合",
      trigger: "blur",
    },
    {
      min: 8,
      max: 64,
      message:
        "8~64位字符，允许大、小写英文字母、特殊字符、数字，且至少3种组合",
      trigger: "blur",
    },
  ],
  confirmPwd: [
    {
      required: true,
      validator: validatePwd,
      message:
        "8~64位字符，允许大、小写英文字母、特殊字符、数字，且至少3种组合",
      trigger: "blur",
    },
    {
      min: 8,
      max: 64,
      message:
        "8~64位字符，允许大、小写英文字母、特殊字符、数字，且至少3种组合",
      trigger: "blur",
    },
  ],
};
const formLabelAlignRef = ref("formLabelAlign");
const onSubmit = () => {
  // //判空
  // if (!formLabelAlign.newpwd) {
  //   ElMessage({
  //     type: "warning",
  //     message: "密码不能为空",
  //     customClass: "msg-zindex",
  //   });
  //   return;
  // }

  //加密
  let obj = {
    id: props.id,
    pwd: formLabelAlign.newpwd,
  };
  
  // delete obj["newPassword"];
  formLabelAlignRef.value?.validate(async (valid) => {
    if (valid) {
      if (formLabelAlign.newpwd != formLabelAlign.confirmPwd) {
        ElMessage({
          type: "warning",
          message: "密码不一致",
          customClass: "msg-zindex",
        });
        return;
      }
      editPassWord(obj)
        .then((res) => {
          if (res.success) {
            ElMessage.success(res.msg || "修改密码成功");
            emits("cancel");
          } else {
            ElMessage.error(res.msg || "修改密码失败");
            emits("cancel");
          }
        })
        .catch((err) => {
          ElMessage.error(err.msg || "修改密码失败");
          emits("cancel");
        });
    } else {
      return false;
    }
  });
};
const cancel_model = () => {
  emits("cancel");
  formLabelAlign.newpwd = "";
  formLabelAlign.confirmPwd = "";
};
const clearForm = () => {
  emits("cancel");
  formLabelAlign.newpwd = "";
  formLabelAlign.confirmPwd = "";
};
</script>
<style lang="scss" scoped>
@import "../assets/css/dialog";

:deep.el-form-item__content {
  display: flex;
}
.el-form-item {
  margin-bottom: 20px;
}
</style>
